<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 250px;
            height: 250px;
            background-color: green;
            margin:100px;

            /*animation: move 2s 3  alternate linear;*/

            /* animation属性详解*/
            /* 动画名称*/
            animation-name: move;
            /* 一次动画持续时间  前两属性是必须，且顺序固定*/
            animation-duration: 3s;
            /* 动画执行次数  无数次：infinite*/
            animation-iteration-count: 1;
            /* 动画的方向： normal 正常 ， alternate： 反向*/
            animation-direction: alternate;
            /* 动画延迟执行*/
            /*animation-delay: 1s;*/

            /* 设置动画结束盒子盒子的状态
                forwards：保持动画结束后的状态
                backwards：保持动画开始前的状态*/
                animation-fill-mode:forwards;

            /* 运动曲线  linear   ease-in-out  steps()*/
            /*animation-timing-function:ease-in;*/

            animation-timing-function: steps(8);
        }

        @keyframes move{
            0%{

            }

            100%{
                transform:translateX(500px) rotate(345deg);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>